<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width">
    <title>Document</title>
    <link rel="stylesheet" href="../css/waitfor.css"/>
    <script src="../unis/jquery-1.8.3.min.js"></script>
    <script src='../interface/interface.js'></script>
</head>
<body>
<div class="content">
    <img src="../imgs/logoutBg.png" alt=""/>
</div>
<div class="main">
    <div class="top">
        <div class="left"  style="visibility:hidden">
            <img class="leftImg" src="" alt=""/>
            <div style="font-size: 0.7rem;color: #ffffff;padding-left: 10px;">
                <p class="leftName"></p>
                <p class="leftNumber"></p>
            </div>
        </div>
        <div class="center">
            <p>
                <img  onclick="mytest()" style="" src="../imgs/for_center_bg.png" alt=""/>
            </p>
        </div>
        <div class="right" style="visibility:hidden">
            <img class="rightImg" src="" alt=""/>
            <div style="font-size: 0.7rem;color: #ffffff;padding-left: 10px;">
                <p class="rightName"></p>
                <p class="rightNumber"></p>
            </div>
        </div>
    </div>
    <div class="footer" style="visibility:hidden">
        <div class="footer_center" style="position: relative">
            <img class="footerImg" style="width: 7.5%" src="" alt=""/>
            <div style="font-size: 0.7rem;color: #ffffff;padding-left: 10px; position: absolute;left:54%;top:10%">
                <p class="footerName"></p>
                <p class="footerNumber"></p>
            </div>
        </div>

    </div>
    <div class="remove">
        <img src="../imgs/btn_jsfz.png" alt=""/>
    </div>
</div>
<div class="RoomNumber">
    <p style="color: #01fcd0">09 11</p>
    <p>房间号</p>
    <p class="room">673377</p>
    <p>卡五星</p>
    <p>襄阳玩法</p>
</div>
<div class="parentAlert" style="display: none">
    <ul class="addPiao">
        <li data="0">
            <img src="../imgs/p.png" alt=""/>
        </li>
        <li  data="1">
            <img src="../imgs/p1.png" alt=""/>
        </li>
        <li  data="2">
            <img src="../imgs/p2.png" alt=""/>
        </li>
    </ul>
</div>
</body>
<script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
   	 // Empty
  	}
  function mytest() {
    var args = window.location.href.split('?')[1];
    var RoomPwd = $('.room').html()
    var is = check();
       if(is=="android") {
        android.jsCallJava(args,RoomPwd);
    }else{
        jsCallJavaios(args,RoomPwd);
    }
  }

  /**
	 * 判断手机平台 ios 安卓
	 * return v;
	 */
	function check() {
		var ua = navigator.userAgent.toLowerCase();
		var v = null;
		if (/iphone|ipad|ipod/.test(ua)) {
			v = "iphone"
		} else if (/android/.test(ua)) {
			v = "android";
		}
		return v;
	}


    if(window.location.href.indexOf('token')== -1){
        var url = window.location.href.split('?')[0];
        window.location.href = url.replace('waitfor','login');
    }
    if(window.location.href.indexOf('mid')==-1){
        var url = window.location.href.split('?')[0];
        window.location.href = url.replace('waitfor','login');
    }
    var wsServer ='ws://139.224.68.110:9502';  //地址
    var ws = new WebSocket(wsServer); //监听链接
    ws.onopen = function (evt) {  //测试链接成功或失败
        //websocket.readyState 属性：
        switch (ws.readyState) {
            case 0: console.log('通信服务未打开');break;
            case 1: console.log('连接成功');break;
            case 2: console.log('通信端口关闭，无法连接');break;
            case 3: console.log('通信服务已关闭');break;
        }
        var jonin_info = window.location.href.split('?')[1];
        var info = jonin_info.split('&');
        var joinInfo = {
            'role': info[2].split('=')[1],
            'rid': info[3].split('=')[1],
            'mid': info[0].split('=')[1],
            'token' : info[1].split('=')[1],
            'type': 1
        };
        var opt = {
            url : 'http://mj.lcc.so/game/num/'+joinInfo.role+'/'+joinInfo.rid+'/'+joinInfo.mid,
            data : 'mid='+joinInfo.mid+'&token='+joinInfo.token
        };
        window.getData(opt,function(data){
            console.log(data)
            $('.room').html(data.room.room.pwd);
            var footer = data.room.order.footer;
            var left = data.room.order.left;
            var right = data.room.order.right;
            $('.left').attr('id',data.room.order.left);
            $('.right').attr('id',data.room.order.right);
            $('.footer').attr('id',data.room.order.footer);
            if(data.room.players[footer]!=undefined){
                $('.footer').css('visibility','visible');
                var footer_data = data.room.players[footer];
                $('.footerImg').attr('src',footer_data.wxavatar);
                $('.footerName').html(footer_data.wxname);
                $('.footerNumber').html(footer_data.point);
            }
            if(data.room.players[left]!=undefined){
                $('.left').css('visibility','visible');
                var left_data = data.room.players[left];
                $('.leftImg').attr('src',left_data.wxavatar);
                $('.leftName').html(left_data.wxname);
                $('.leftNumber').html(left_data.point);
            }
            if(data.room.players[right]!=undefined){
                $('.right').css('visibility','visible');
                var right_data = data.room.players[right];
                $('.rightImg').attr('src',right_data.wxavatar);
                $('.rightName').html(right_data.wxname);
                $('.rightNumber').html(right_data.point);
            }
        });
        ws.send(JSON.stringify(joinInfo));
    };

    ws.onmessage = function (evt) {
        var data = JSON.parse(evt.data);
        console.log(data);
        if (data.type == 1) {
            setPlayer(data);
            if (data.status && data.status == 1) {
                $('.parentAlert').show();
            }
        }
        if (data.type == 2) {
            var jonin_info = window.location.href.split('?')[1];
            var info = jonin_info.split('&');
            var joinInfo = {
                'role': info[2].split('=')[1],
                'rid': info[3].split('=')[1],
                'mid': info[0].split('=')[1],
                'token' : info[1].split('=')[1],
                'type': 1
            };
            var url = window.location.href.split('?')[0].replace('waitfor','game')+'?/'+joinInfo.role+'/'+joinInfo.rid+'/'+joinInfo.mid+'/'+joinInfo.token+'/token';
            window.location.href = url ;
        }

        if (data.type == 9) {
            $("#"+data.role).empty();
        }
    }

    function setPlayer(data) {
        var pv = $("#"+data.role).find('p').first().text();
        if (pv == undefined || pv == '') {
            var str ='<img src="'+data.member.wxavatar+'" alt=""/>'
                    +'<div style="font-size: 0.7rem;color: #ffffff;padding-left: 10px;">'
                    +'<p>'+data.member.wxname+'</p><p>'+data.member.point+'</p></div></div>';
            $("#"+data.role).empty().append(str);
        }
        $("#"+data.role).css('visibility','visible');
    }
    $('.addPiao').find('li').on('click',function(){
        var data = $(this).attr('data');
        var jonin_info = window.location.href.split('?')[1];
        var info = jonin_info.split('&');
        var addpiao = {
            'role': info[2].split('=')[1],
            'rid': info[3].split('=')[1],
            'mid': info[0].split('=')[1],
            'type': 2,
            'piao': data
        };
        ws.send(JSON.stringify(addpiao));
        $('.addPiao').hide();
    })
</script>
</html>